{layout "../Layout/layout.latte"}
{block headTitle}{$titles}任务详情{/block}
{block tabs_content}
    {include "../Task/tabs.latte"}
{/block}

{block custom}
    {include "../Public/custom.latte" , title1=>"选择执行人", title2=>"选择验收人"}
    <div class="popup dynamic-popup" data-relate-id="info">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-right close-popup">
                关闭
            </a>
            <h1 class="title">发布动态</h1>
        </header>
        <div data-url="{url("mobileConsoles_taskme_addDynamic",array("id"=>$task->getId()))}" class="bar bar-standard bar-footer list-study-block dynamic-submit" style="background: #fff;">
            提交
        </div>
        <div class="content">
            <div class="content-inner">
                <div class="content-block">
                    <div class="list-block" style="margin-top: 2.3rem;">

                        <div class="field-item">
                            <div class="field-item-title">
                                动态内容 <span class="required">*</span>
                            </div>
                            <div class="field-item-body">
                                <textarea class="dynamic-content"></textarea>
                            </div>
                        </div>
                        <div class="field-item">
                            <div class="field-item-title">
                                图片
                            </div>
                            <div class="field-item-body">
                                <span class="pic-add">&plus;<input type="file" id="pics" name="pics" accept="image/*" onchange="handleInputChange(this)"/></span>
                                <input type="hidden" class="pics-added-save dynamic-thumbs" name="thumbs">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form action="{url('mobileConsoles_taskme_commentDynamic',array("id"=>$task->getId()))}" id="comment-say-form">
        <input type="hidden" name="userId" value="">
        <input type="hidden" name="dynamicId" value="">
        <div class="comment-say-content-box-bg"></div>
        <div class="comment-say-content-box">
            <div class="comment-say-content-row">
                <input name="content" id="comment-say-content" placeholder=""/>
                <input type="submit" id="comment-say-content-submit" value="回复">
            </div>
        </div>
    </form>
{/block}
{block private_css}
    {include "../Task/addCss.latte"}
    <style>
        .worker-added-item-remove{
            display:none;
        }

        .dynamic-block{
            background:#eee;
            margin-bottom:60px;
        }

        .dynamic-title{
            text-align:center;
            font-size:16px;
            padding-top:15px;
        }

        .dynamic-item{
            margin-top:15px;
            padding:10px .75rem;
            background:#fff;
        }

        .dynamic-item .dynamic-item-names{
            color:#009dd9;
            border-bottom:2px dashed #dfdfdf;
            position:relative;
        }

        .dynamic-item-time{
            position:absolute;
            right:0;top:0;
            color:#666;
        }

        .dynamic-item-body{
            padding:.5rem 0.25rem;
        }

        .dynamic-item-thumbs img{
            width:60px;
            height:60px;margin:5px 8px 0 0;
        }

        .dynamic-item-tools{
            text-align:right;
            border-top:1px dashed #dfdfdf;
            padding-top:.25rem;
        }

        .dynamic-item-reply{
            margin-right:.75rem;
        }

        .dynamic-comment-dd ul, .dynamic-comment-dd li{
            margin:0;padding:0;
            list-style-type:none;
        }

        .dynamic-comment-dd ul{
            background:#f2f2f2;
            padding-left:5px;
            padding-bottom:5px;
            width:100%;
        }

        .dynamic-comment-dd li span{
            line-height:20px;
            cursor:pointer;
        }

        .dynamic-comment-dd li textarea{
            width:400px;
            height:70px;
        }

        .dynamic-comment-dd li .dynamic-comment-say{
            color:#009dd9;
        }

        .dynamic-comment-dd li .dynamic-comment-say .dynamic-comment-reply{
            color:#666; margin:0 5px;
        }

        .dynamic-comment-reply-input input{
            display:block;
            height:30px;
            line-height:30px;
            margin-top:5px;
            margin-bottom:5px;
            padding:0 30px;
        }

        .dynamic-item dd.dynamic-reply-dd, .dynamic-item dd.dynamic-comment-dd{
            display:none;
        }

        .issue-action{
            position:fixed;
            background:rgba(24, 28, 31, 0.6);
            width:44px;
            height:44px;
            line-height:44px;
            z-index:99999;
            bottom:80px;right:15px;
            text-align:center;
            color:#fff;
        }

        .comment-say-content-box{
            background:#fff;width:100%;position:fixed;
            bottom:0;height:auto;
            z-index:19880501;display:none;
            min-height:50px;
        }

        .comment-say-content-row{
            display:flex;
            padding-top:10px;
        }

        #comment-say-content{
            flex:1;
        }

        #comment-say-content-submit{
            width:80px;
        }

        .comment-say-content-box-bg{
            position:fixed;
            z-index:19880500;
            bottom:0;
            top:0;
            right:0;
            left:0;
            display:none;
            background:rgba(155, 155, 155, 0.3);
        }

        .study-item{
            display:inline-block;
            min-width:40px;
            height:40px;
            background:#fff;
            border:1px solid #f6f6f6;
            color:#aaa;
            text-align:center;
            line-height:40px;
            font-size:12px;
            border-radius:5px;
            margin-right:15px;
            position:relative;
            margin-top:10px;
            padding-left:5px;
            padding-right:5px;
            vertical-align:middle;
        }

        .study-item img{
            width:30px;
            height:30px;
            background:#f6f6f6;
            vertical-align:middle;
        }


    </style>
{/block}

{block private_js}
    {include "../Public/customJs.latte"}
    {include "../Task/addJs.latte"}
    {include "../Public/H5Upload.latte"}
    <script>
        function postPages(toUrl, data) {
            $.showPreloader('正在提交，请稍候...');
            $.ajax({
                type: "POST",
                dataType: "json",
                url: toUrl,
                data: data,
                success: function (res) {
                    $.hidePreloader();
                    try {
                        if (res.status === "y") {
                            $.toast(res.data);
                            setTimeout(function () {
                                location.reload(true);
                            }, 2000)
                        } else {
                            $.toast(res.info);
                        }
                    } catch (e) {
                        $.toast(e.message);
                    }
                }
            });
        }

        function countDown(endTimes) {
            var times = (new Date(endTimes)) - (new Date());
            if (times <= 0) return 0;
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (times > 0) {
                day = Math.floor(times / 1000 / 60 / 60 / 24);
                hour = Math.floor(times / 1000 / 60 / 60 % 24);
                minute = Math.floor(times / 1000 / 60 % 60);
                second = Math.floor(times / 1000 % 60);
            }
            var $return = "";
            if (day > 0) $return += day + "天";
            if (hour > 0) $return += hour + "小时";
            if (minute > 0) $return += minute + "分";
            return $return + second + "秒";
        }

        $(function () {

            $(".dynamic-submit").on("click", function () {
                var data = {
                    content: $(".dynamic-content").val(),
                    thumbs: $(".dynamic-thumbs").val()
                };
                postPages($(this).attr("data-url"), data);
            });

            window.timerdeadline = setInterval(function () {
                var endTimes = $("[data-deadline]").attr("data-deadline");
                var cTime = countDown(endTimes);
                if (cTime === 0) {
                    $("[data-deadline]").text("已过期");
                } else {
                    $("[data-deadline]").text("剩余:" + cTime);
                }
            }, 1000);

            $(".dynamic-comment-button").on("click", function () {
                var url = $(this).attr("data-url");
                var relId = $(this).attr("data-rel");
                var content = $(this).siblings("textarea").val();
                var sendData = {
                    relId: relId,
                    content: content
                };
                postPages(url, sendData);
            });

            $(".issue-action").on("click", function () {
                var buttons1 = [{
                    text: '操作',
                    label: true
                }, {
                    text: '发布动态',
                    bold: true,
                    onClick: function () {
                        $.popup(".dynamic-popup");
                    }
                }, {
                    text: '指派',
                    bold: true,
                    onClick: function () {
                        $.popup(".staff-popup");
                    }
                }, {
                    text: '取消任务',
                    color: 'danger',
                    onClick: function () {
                        var toUrl = $(".issue-action").attr("data-cancel-url");
                        $.confirm('确定取消任务吗？', function () {
                            $.showPreloader('正在取消，请稍候...');
                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: toUrl,
                                success: function (res) {
                                    $.hidePreloader();
                                    try {
                                        if (res.status === "y") {
                                            $.toast(res.data);
                                            setTimeout(function () {
                                                location.reload(true);
                                            }, 2000)
                                        } else {
                                            $.toast(res.info);
                                        }
                                    } catch (e) {
                                        $.toast(e.message);
                                    }
                                }
                            });
                        });
                    }
                }];
                var buttons2 = [{
                    text: '取消',
                    bg: 'danger'
                }];
                $.actions([buttons1, buttons2]);
            });

            $(".dynamic-item-body,.dynamic-comment-say-content").on("click", function () {
                $(".comment-say-content-box").show();
                $("#comment-say-content").focus().attr("placeholder", "回复" + $(this).attr("data-user-name"));
                $("input[name='userId']").val($(this).attr("data-user-id"));
                $("input[name='dynamicId']").val($(this).attr("data-dynamic-id"));
                $(".comment-say-content-box-bg").show();
            });

            $("#comment-say-form").on("submit", function () {
                postPages($(this).attr("action"), $(this).serialize());
                return false;
            });
            $(".comment-say-content-box-bg").on("click", function () {
                $(".comment-say-content-box-bg,.comment-say-content-box").hide();
            })


        })
    </script>
{/block}




{block content}
    <span class="issue-action" data-cancel-url="{url("mobileConsoles_taskme_cancel",array("id"=>$task->getId()))}">操作</span>
    <div class="list-block" style="margin-top: 4.7rem;">
        <div class="field-item">
            <div class="field-item-title">
                任务名称 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                <input type="text" placeholder="请输入任务名称" disabled value="{$task->getNames()}"/>
                <span class="field-item-tag" style="display: none;">好客联盟</span>
            </div>
        </div>
        <div class="field-item">
            <div class="field-item-title">
                任务项目
            </div>
            <div class="field-item-body">
                <div class="item-content" style="padding-left: 0;">
                    <div class="item-inner selected-group-show">{$groupName}</div>
                </div>
            </div>
        </div>
        <div class="field-item">
            <div class="field-item-title">
                优先级 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                {foreach $priorityMemo as $priority =>$priorityM}
                    <label class="priority-input priority-{$priorityM} {if $task->getPriority()==$priority}selected{/if}">
                        <span><input type="radio" name="priority" value="{$priority}" {if $iterator->isFirst()}checked{/if}>{$priorityM}</span>
                    </label>
                {/foreach}
            </div>
        </div>
        <div class="field-item">
            <div class="field-item-title">
                任务内容 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                <textarea disabled>{$task->getContent()}</textarea>
            </div>
        </div>
        <div class="field-item">
            <div class="field-item-title">
                图片 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                {foreach $thumbs as $thumb}
                    <img src="{$cdnThumbBase}{$thumb}" alt="">
                {/foreach}
            </div>
        </div>
        <div class="field-item-between"></div>
        <div class="field-item">
            <div class="field-item-title">
                验收人 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                <div class="field-item-member-box">
                    {$accept["selected"]|noescape}
                </div>
            </div>
        </div>
        <div class="field-item">
            <div class="field-item-title">
                执行人 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                <div class="field-item-member-box">
                    {$executors["selected"]|noescape}
                    <span class="staff-add open-popup open-worker-added-box" data-url="{url("mobileConsoles_taskme_allot",array("id"=>$task->getId()))}" data-popup=".staff-popup" id="executors">&plus;</span>
                </div>
            </div>
        </div>
        <div class="field-item">
            <div class="field-item-title">
                期限 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                <div style="display: flex;justify-content: space-between;font-size:0.65rem">
                    <span>{$task->getDeadline()|totime}之前</span>
                    <span class="data-deadline" data-deadline="{$task->getDeadline()|totime}">目前还剩下：1天12小时50分</span>
                </div>
            </div>
        </div>
        <div class="field-item-between"></div>
        <div class="field-item">
            <div class="field-item-title">
                积分 <span class="required">*</span>
            </div>
            <div class="field-item-body">
                <input type="text" disabled value="{$task->getAcorn()}"/>
            </div>
        </div>

        {*<div class="field-item-between"></div>
        {if $studies}
            <div class="field-item">
                <div class="field-item-title">
                    检验学习
                </div>
                <div class="field-item-body">
                    {$studies|noescape}
                </div>
            </div>
        {/if}*}


        <div class="dynamic-block">
            <div class="dynamic-title">动态</div>
            {foreach $dynamics as $dynamic}
                <div class="dynamic-item">
                    <div class="dynamic-item-names">{$dynamic["userName"]} {if $dynamic["ruserId"]}<span class="dynamic-reply">回复</span>{$dynamic["ruserName"]}{/if}
                        <div class="dynamic-item-time">{$dynamic["addTime"]|totime}</div>
                    </div>
                    <div class="dynamic-item-body" data-user-name="{$dynamic["userName"]}" data-user-id="{$dynamic["userId"]}" data-dynamic-id="{$dynamic["id"]}">
                        {$dynamic["content"]}
                    </div>
                    <div class="dynamic-item-thumbs">

                        {foreach $dynamic["thumbs"] as $thumb}
                            <img src="https://cdn.itmakes.com/thumbs/{$thumb}" alt="">
                        {/foreach}
                    </div>

                    <div class="dynamic-item-tools">

                        <span class="dynamic-item-comment">回复({count($comments[$dynamic["id"]])})</span>
                    </div>
                    <dd class="dynamic-comment-dd">
                        <ul>
                            {foreach $comments[$dynamic["id"]] as $comment}
                                <li data-names="{$userId==$comment["userId"]?$comment["ruserName"]:$comment["userName"]}">
                                    <span class="dynamic-comment-say">{$comment["userName"]} {if $comment["replyId"]&& $comment["replyId"]!=$comment["userId"]}<span class="dynamic-comment-reply">回复</span> {$comment["ruserName"]}{/if}：</span>
                                    <span class="dynamic-comment-say-content" data-user-id="{$comment["userId"]}" data-dynamic-id="{$dynamic["id"]}" data-user-name="{$comment["userName"]}">{$comment["content"]}</span>
                                </li>
                            {/foreach}
                        </ul>
                    </dd>
                </div>
            {/foreach}
        </div>
    </div>
{/block}